const fontFamily = 'Microsoft YaHei'
const fontSize = 12
const axisLabelMargin = 8

export default {
  version: 1,
  themeName: '黑夜',
  theme: {
    textStyle: {
      fontFamily,
      fontSize,
      lineHeight: fontSize
    },
    dvStandardChart: {
      // theme: 'mobile-app-light',
      baseOption: {
        dvInsight: [
          {
            textSummary: {
              circleStyle: {
                type: 'circle',
                shape: {
                  cx: 0,
                  cy: 0,
                  r: 4
                },
                style: {
                  fill: '#FFFFFF',
                  stroke: 'transparent'
                },
                z2: 9999
              },
              lineStyle: {
                type: 'line',
                style: {
                  stroke: '#FFFFFF',
                  lineWidth: 1,
                  lineHeight: 24
                },
                z2: 9999
              },
              rectStyle: {
                type: 'rect',
                shape: {
                  r: 4
                },
                style: {
                  fill: '#FFFFFF',
                  opacity: 0.8
                },
                z: 9999,
                z2: 9999
              },
              textStyle: {
                type: 'text',
                style: {
                  x: 0,
                  y: 0,
                  fill: '#000',
                  padding: [4, 6]
                },
                z: 9999,
                z2: 9999
              }
            },
            line: {
              lineStyle: {
                width: 1,
                color: '#F2920D'
              },
              label: {
                color: '#F2920D',
                textShadowColor: 'black',
                textShadowBlur: 2
              }
            },
            referenceLine: {
              symbol:
                'image://',
              symbolSize: [10, 8],
              symbolOffset: [0, '50%'],
              lineStyle: {
                width: 1,
                color: '#FFF'
              }
            },
            axisReferenceLine: {
              lineStyle: {
                width: 1,
                color: '#fff'
              },
              label: {
                color: 'white',
                distance: 2,
                backgroundColor: '#7E8DFF',
                padding: [4, 6, 2, 6],
                borderRadius: 2,
                dvZ: 1000,
                dvZ2: 10
              }
            },
            area: {
              itemStyle: {
                color: '#F2920D',
                opacity: 0.2
              }
            },
            blurSeries: {
              itemStyle: {
                opacity: 0.4
              },
              lineStyle: {
                opacity: 0.4
              },
              areaStyle: {
                opacity: 0.4
              }
            }
          },
          {
            type: 'Trend',
            line: {
              lineStyle: {
                color: '#fff'
              },
              label: {
                color: '#fff'
              }
            }
          },
          {
            type: 'Interval',
            line: {
              lineStyle: {
                color: '#fff'
              },
              label: {
                color: '#fff'
              }
            }
          }
        ],
        legend: {
          backgroundColor: '#181E25',
          textStyle: {
            fontSize: 12,
            lineHeight: 16,
            color: '#c8cbd0',
            dvDisabledTextColor: 'rgba(250,251,252,0.2)'
          },
          dvPagination: {
            color: '#c8cbd0',
            image: `url('')`,
            imageHover: `url('')`,
            imageDisabled: `url('')`
          }
        },
        grid: {
          dvBoxLayout: {
            enable: true
          },
          height: 'auto',
          width: 'auto',
          top: 8,
          bottom: 20,
          left: 56,
          right: 4
        },
        dataZoom: [
          {
            type: 'slider',
            moveOnMouseMove: false,
            zoomOnMouseWheel: false,
            backgroundColor: '#313438',
            dvScrollColor: '#DADDE0',
            borderColor: '#60656C',
            show: false,
            handleIcon:
              'image://'
          }
        ],
        tooltip: {
          backgroundColor: '#fff',
          extraCssText:
            'border-radius: 4px; padding: 8px; border-color: transparent; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);',
          textStyle: {
            color: 'rgba(0, 0, 0, 0.84)',
            lineHeight: 16
          },
          dvTitleStyle: {
            color: 'rgba(15, 15, 15, 0.45)'
          }
        },
        xAxis: {
          nameLocation: 'end',
          dvNameLocation: 'right',
          /**
           * nameGap的设置是结合杰哥dvNameLocation的源码实现决定的
           * nameGap = -(xAxis.axisLabel.fontSize + xAxis.nameTextStyle.fontSize + xAxis.axisLabel.margin + 设计师规定偏移)
           */
          nameGap: -(fontSize * 2 + axisLabelMargin + 4),
          nameTextStyle: {
            dvZ: 5,
            align: 'right',
            verticalAlign: 'bottom',
            fontFamily,
            fontSize,
            lineHeight: 12,
            padding: [0, 4, 4, 0]
            // borderWidth: 1,
            // borderColor: '#f00'
          },
          axisLine: {
            show: true,
            lineStyle: {
              // opacity: 0.32
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              // opacity: 0.32
            }
          },
          splitLine: {
            // show: true,
            dvZ: 0,
            lineStyle: {
              // opacity: 0.08
            }
          },
          axisLabel: {
            fontFamily,
            fontSize,
            lineHeight: 12,
            margin: axisLabelMargin,
            showMinLabel: true,
            showMaxLabel: true,
            hideOverlap: true,
            /** @see https://datav.iwencai.com/components/paradigm-chart/docs/apis/component/xAxis#axislabeldvalignedge */
            dvAlignEdge: true,
            dvIntervalStrategy: 'gt16'
          }
        },
        yAxis: {
          nameLocation: 'end',
          nameGap: 0,
          // scale: true,
          nameTextStyle: {
            dvZ: 5,
            align: 'left',
            verticalAlign: 'top',
            fontFamily,
            fontSize,
            lineHeight: 12,
            padding: [4, 0, 0, 4]
            // borderWidth: 1,
            // borderColor: '#f00'
          },
          splitLine: {
            show: true,
            dvZ: 0,
            lineStyle: {
              // opacity: 0.08
            }
          },
          axisLabel: {
            fontFamily,
            fontSize,
            lineHeight: 12
          }
        },
        polar: {
          radius: [30, '78%'],
          show: false
        },
        grid3D: {
          light: {
            main: {
              intensity: 1.2,
              shadow: true
            },
            ambient: {
              intensity: 0.3
            }
          }
        },
        series: [
          {
            type: 'line',
            symbolSize: 8,
            emphasis: {
              borderWidth: 1.5,
              itemStyle: {
                opacity: 1
              }
            },
            endLabel: {
              dvZ: 10,
              show: false,
              offset: [6, -6],
              padding: [6, 8, 6, 8],
              backgroundColor: 'rgba(255,255,255,0.7)',
              borderColor: 'rgba(232,232,232,1)',
              borderWidth: 0.5,
              borderRadius: 2
            },
            lineStyle: {
              width: 1.5
            },
            itemStyle: {
              opacity: 0
            },
            stateAnimation: {
              duration: 0
            }
          },
          {
            type: 'bar3D',
            shading: 'lambert',
            label: {
              fontSize: 16,
              borderWidth: 1
            }
          },
          {
            type: 'pie',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0)'
              }
            }
          },
          {
            type: 'gauge',
            axisTick: {
              show: false,
              length: 8,
              lineStyle: {
                color: '#181E24',
                width: 2
              }
            },
            splitLine: {
              show: false,
              length: 30,
              lineStyle: {
                color: '#181E24',
                width: 4
              }
            },
            pointer: {
              show: false,
              itemStyle: {
                color: 'auto'
              }
            },
            title: {
              show: false,
              fontSize: 12,
              lineHeight: 12
            },
            detail: {
              show: false,
              height: 12,
              fontWeight: 'normal',
              fontSize: 12,
              lineHeight: 12,
              padding: [2, 8, 2, 8],
              color: 'inherit',
              borderColor: 'inherit',
              borderWidth: 1
            }
          },
          {
            type: 'scatter3D',
            shading: 'lambert',
            label: {
              fontSize: 16,
              borderWidth: 1
            }
          },
          {
            type: 'treemap',
            itemStyle: {
              gapWidth: 1
            }
          }
        ]
      }
    },
    dvTimeline: {
      // dark
      domCSSText: 'padding: 0; box-shadow: none; border-color: transparent;background: #181E25;',
      config: {
        axis: {
          background: {
            style: {
              backgroundColor: '#484C51'
            }
          },
          marker: {
            style: {
              backgroundImage: `url('')`,
              ':hover': {
                backgroundImage: `url('')`
              },
              ':active': {
                backgroundImage: `url('')`
              }
            }
          },
          tickLine: {
            main: {
              style: {
                backgroundColor: '#AEB2B7'
              }
            },
            sub: {
              style: {
                backgroundColor: '#60656C'
              }
            }
          },
          tickValue: {
            style: {
              color: '#FAFBFC'
            }
          },
          tooltip: {
            style: {
              backgroundColor: 'black',
              color: '#FAFBFC',
              borderColor: 'transparent'
            },
            textStyle: {
              color: '#FAFBFC'
            },
            arrowStyle: {
              borderColor: 'black transparent transparent transparent'
            }
          }
        },
        operation: {
          playButton: {
            style: {
              backgroundImage: `url('')`
            }
          },
          pauseButton: {
            style: {
              backgroundImage: `url('')`
            }
          },
          previousButton: {
            style: {
              backgroundColor: '#181E25',
              color: '#FAFBFC',
              borderColor: '#60656C',
              ':hover': {
                borderColor: '#7E8DFF',
                color: '#7E8DFF',
                '::before': {
                  backgroundImage: `url('')`
                }
              },
              ':disabled': {
                borderColor: '#60656C',
                color: '#60656C',
                '::before': {
                  backgroundImage: `url('')`
                }
              },
              '::before': {
                backgroundImage: `url('')`
              }
            }
          },
          nextButton: {
            style: {
              backgroundColor: '#181E25',
              color: '#FAFBFC',
              borderColor: '#60656C',
              ':hover': {
                borderColor: '#7E8DFF',
                color: '#7E8DFF',
                '::before': {
                  backgroundImage: `url('')`
                }
              },
              ':disabled': {
                borderColor: '#60656C',
                color: '#60656C',
                '::before': {
                  backgroundImage: `url('')`
                }
              },
              '::before': {
                backgroundImage: `url('')`
              }
            }
          }
        }
      }
    },
    dvDataZoomBorderColor: '#60656C',
    dvScrollColor: '#60656C',
    dvSelect: {
      '--theme-background': '#181E25',
      '--theme-background-hover': '#313438',
      '--theme-background-select': '#272E50',
      '--theme-border': '#60656C',
      '--theme-option': '#FAFBFC',
      '--theme-label': '#FAFBFC',
      '--theme-label-select': '#6C6BFF',
      '--theme-placeHolder': '#C8CBD0',
      '--theme-option-background': '#313438',
      '--theme-dropdown-icon': `url('')`,
      '--theme-label-hover': '#6C6BFF'
    },
    dvText: {
      '--theme-background': '#181E25',
      '--theme-text-color': '#DADDE0',
      '--theme-title-color': '#FAFBFC',
      '--theme-text-background-normal': '#24282E',
      '--theme-text-background-hover': '#313438',
      '--theme-text-background-select': 'rgba(99,111,255,0.20)'
    },
    dvTimeLine: {
      '--theme-background': '#181E25',
      '--theme-border': '#60656C',
      '--theme-label': '#7E8DFF',
      '--theme-label-background': 'rgba(99,111,255,0.28)',
      '--theme-time': '#C8CBD0',
      '--theme-text': '#FAFBFC',
      '--theme-link': '#7E8DFF',
      '--theme-text-hover': '#313438',
      '--theme-text-select': '#272E50'
    },
    dvTable: {
      '--theme-border': '#60656C',
      '--theme-border-select': '#7E8DFF',
      '--theme-header-background': '#313438',
      '--theme-header-text': '#C8CBD0',
      '--theme-normal-background': '#181E25',
      '--theme-normal-text': '#FAFBFC',
      '--theme-header-hover': '#484C51',
      '--theme-normal-hover': '#313438',
      '--theme-header-select': '#3B3F5F'
    },
    dvDropdown: {
      '--theme-text': '#FAFBFC',
      '--theme-text-hover': '#6C6BFF',
      '--theme-background': '#181E25',
      '--theme-background-hover': '#313438',
      '--theme-background-select': '#272E50',
      '--theme-border': '#60656C',
      '--theme-kline-text': '#C8CBD0',
      '--theme-kline-text-hover': '#FAFBFC',
      '--theme-dropdown': `url('')`,
      '--theme-default-dropdown': `url('')`
    },
    dvPagination: {
      '--theme-button': `url('')`,
      '--theme-more': `url('')`,
      '--theme-fast': `url('')`,
      '--theme-button-disabled': `url('')`,
      '--theme-background-color-disabled': 'rgba(24,30,37,0.4)',
      '--theme-background-color': '#181E25',
      '--theme-border-color': '#60656C',
      '--theme-background-color-selected': '#7E8DFF',
      '--theme-font-color-selected': '#FFFFFF',
      '--theme-background-color-hover': '#313438',
      '--theme-font-color-hover': '#FFFFFF',
      '--theme-font-color': '#FFFFFF'
    },

    // * ECharts theme -------------------------------------------------------
    seriesCnt: '12',
    backgroundColor: '#181e25',
    titleColor: '#fafbfc',
    subtitleColor: '#c8cbd0',
    textColorShow: false,
    textColor: '#333',
    markTextColor: '#313438',
    color: [
      '#0f62fe',
      '#33b2cc',
      '#da1e28',
      '#f2920d',
      '#6d61f6',
      '#a6c8ff',
      '#33b1ff',
      '#ffb5bb',
      '#ac69ee',
      '#ffad3b',
      '#0a71bc',
      '#63b314'
    ],
    borderColor: '#000000',
    borderWidth: '1',
    visualMapColor: [
      '#ff6c6f',
      '#e63c47',
      '#ad0126',
      '#7c0105',
      '#004e1a',
      '#007a39',
      '#2fa861',
      '#6bc78b',
      '#ffbebf'
    ],
    legendTextColor: '#92989f',
    kColor: '#ff4a4a',
    kColor0: '#00b36b',
    kBorderColor: '#ff4a4a',
    kBorderColor0: '#00b36b',
    kBorderWidth: 1,
    lineWidth: 2,
    symbolSize: '8',
    symbol: 'circle',
    symbolBorderWidth: '2',
    lineSmooth: false,
    graphLineWidth: 1,
    graphLineColor: '#aeb2b7',
    mapLabelColor: '#000',
    mapLabelColorE: 'rgb(100,0,0)',
    mapBorderColor: '#444',
    mapBorderColorE: '#444',
    mapBorderWidth: 0.5,
    mapBorderWidthE: 1,
    mapAreaColor: '#eee',
    mapAreaColorE: 'rgba(255,215,0,0.8)',
    axes: [
      {
        type: 'all',
        name: '通用坐标轴',
        axisLineShow: true,
        axisLineColor: '#92989f',
        axisTickShow: false,
        axisTickColor: '#484c51',
        axisLabelShow: true,
        axisLabelColor: '#92989f',
        splitLineShow: true,
        splitLineColor: ['#484c51'],
        splitAreaShow: false,
        splitAreaColor: ['#eeeeee']
      },
      {
        type: 'category',
        name: '类目坐标轴',
        axisLineShow: true,
        axisLineColor: '#333',
        axisTickShow: true,
        axisTickColor: '#333',
        axisLabelShow: true,
        axisLabelColor: '#333',
        splitLineShow: false,
        splitLineColor: ['#ccc'],
        splitAreaShow: false,
        splitAreaColor: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      },
      {
        type: 'value',
        name: '数值坐标轴',
        axisLineShow: true,
        axisLineColor: '#333',
        axisTickShow: true,
        axisTickColor: '#333',
        axisLabelShow: true,
        axisLabelColor: '#333',
        splitLineShow: true,
        splitLineColor: ['#ccc'],
        splitAreaShow: false,
        splitAreaColor: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      },
      {
        type: 'log',
        name: '对数坐标轴',
        axisLineShow: true,
        axisLineColor: '#333',
        axisTickShow: true,
        axisTickColor: '#333',
        axisLabelShow: true,
        axisLabelColor: '#333',
        splitLineShow: true,
        splitLineColor: ['#ccc'],
        splitAreaShow: false,
        splitAreaColor: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      },
      {
        type: 'time',
        name: '时间坐标轴',
        axisLineShow: true,
        axisLineColor: '#333',
        axisTickShow: true,
        axisTickColor: '#333',
        axisLabelShow: true,
        axisLabelColor: '#333',
        splitLineShow: true,
        splitLineColor: ['#ccc'],
        splitAreaShow: false,
        splitAreaColor: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    ],
    axisSeperateSetting: false,
    toolboxColor: '#c8cbd0',
    toolboxEmphasisColor: '#7e8dff',
    tooltipAxisColor: '#fafbfc',
    tooltipAxisWidth: '1',
    timelineLineColor: '#60656c',
    timelineLineWidth: 1,
    timelineItemColor: '#60656c',
    timelineItemColorE: '#60656c',
    timelineCheckColor: '#636fff',
    timelineCheckBorderColor: '#636fff',
    timelineItemBorderWidth: 1,
    timelineControlColor: '#60656c',
    timelineControlBorderColor: '#60656c',
    timelineControlBorderWidth: '0',
    timelineLabelColor: '#dadde0',
    datazoomBackgroundColor: '#60656C',
    datazoomDataColor: 'rgba(255,255,255,0.3)',
    datazoomFillColor: 'rgba(15,98,254,0.2)',
    datazoomHandleColor: '#a7b7cc',
    datazoomHandleWidth: '100',
    datazoomLabelColor: '#DADDE0'
  }
}
